<template>
    <div class="wise_order_List_page">
        <ZWSearch row-num="3" :option="searchOption" @search="search" @reset="reset" />
        <ZwTable
            ref="listTableRef"
            tab-h="initial"
            :option="tableOption"
            :fetch-params="Data.searchParams"
            :fetch-api="fetchApi()">
            <template #headerOperate>
                <el-button type="primary" :disabled="!Data.hasAddMan" @click="syncOrderHandler">同步订单</el-button>
            </template>
            <template v-if="!Data.hasAddMan" #empty>
                <div>
                    <div class="zw-table__empty">
                        <img class="zw-table__empty-img" src="/src/assets/noData.png" />
                        <div class="zw-table__empty-txt">当前无授权的达人账号，请先在授权管理-达人列表中添加</div>
                        <el-button type="primary" @click="goToAddWiseManHandler">去添加</el-button>
                    </div>
                </div>
            </template>
        </ZwTable>
        <!-- 删除弹框 -->
        <ZWDeletdialog ref="DeletdialogRef" @submit="onDeleteSubmit" />
        <!-- 同步订单 -->
        <ZWDialog :app-dialog="appDialog">
            <div class="dialog_tip_container">
                <div>订单正在同步中...</div>
                <div>数据量较大，请耐心等待</div>
            </div>
        </ZWDialog>
    </div>
</template>

<script setup lang="tsx">
import { reactive, ref, onMounted, computed } from 'vue';
import { ElMessage, ElButton } from 'element-plus';
import ZWSearch from '@/components/zw/search-form/SearchForm';
import ZwTable from '@/components/zw/table1.0/Table';
import ZWDeletdialog from '@/components/ZWDeletdialog.vue';
import ZWDialog from '@/components/Dialog.vue';
import { getDarenOrderList, syncDarenOrder, getWiseManList } from '@/api/ecommerce/wiseManList';
import lodash from 'lodash';
import router from '@/router';
import goodDefaultImg from '@/assets/icon/daren-good-default.png';
import { ShowTaskMessage } from '@/hooks/TaskMessageHooks';
import { parabolaAnimation } from '@/utils/parabola';

type stateType = {
    searchParams: any;
    hasAddMan: number;
};

type defaultParamsType = {
    daren_channel_id: number | string;
};

const defaultParams: any = {
    daren_channel_id: '0',
    order_state: '0'
};

const Data = reactive<stateType>({
    searchParams: lodash.cloneDeep(defaultParams),
    hasAddMan: 0
});

const belongOptionList = reactive([]);
const sourceVal = ref(null);
const searchOption = computed(() => {
    return [
        {
            label: '订单编号',
            name: 'order_sn',
            type: 'input',
            value: '',
            placeholder: '请输入订单编号'
        },
        {
            label: '来源渠道',
            name: 'daren_channel_id',
            value: '0',
            type: 'select',
            placeholder: '全部',
            optionList: [
                { label: '全部', value: '0' },
                { label: '抖音达人', value: 21 },
                { label: '快手达人', value: 22 }
            ],
            async change(val: any, from: any) {
                sourceVal.value = val;
                from.daren_openid = '';
                defaultParams.daren_openid = '';
                const daren_channel_id = sourceVal.value || '0';
                if (sourceVal.value != 0 && !sourceVal.value) {
                    belongOptionList.splice(0, belongOptionList.length);
                    return;
                }
                const data: any = await getWiseManList({
                    daren_channel_id,
                    auth_status: [2, 3],
                    page: 1,
                    page_size: 999
                });
                belongOptionList.splice(0, belongOptionList.length, ...data.data);
            }
        },
        {
            label: '来源达人',
            name: 'daren_openid',
            value: '',
            type: 'select',
            clearable: true,
            placeholder: '请选择达人',
            optionList: belongOptionList,
            formatOption: (v: any) => ({
                label: v.daren_name,
                value: v.daren_openid
            })
        },
        {
            label: '订单状态',
            name: 'order_state',
            value: '0',
            type: 'select',
            placeholder: '全部',
            optionList: [
                { label: '全部', value: '0' },
                { label: '已支付', value: 2 },
                { label: '已签收', value: 4 },
                { label: '已完成', value: 5 },
                { label: '已关闭', value: 6 }
            ]
        },
        {
            label: '创建时间',
            name: 'order_time',
            value: [],
            type: 'datePicker',
            datePickerType: 'daterange',
            datePickerFormat: 'YYYY-MM-DD HH:mm:ss',
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
            startPlaceholder: '开始时间',
            endPlaceholder: '结束时间'
        }
    ];
});
const currentParams = ref<any>(null);

// 搜索
const search = (data: any): void => {
    Data.searchParams = data;
    currentParams.value = data;
};

// 重置
const reset = (): void => {
    Data.searchParams = lodash.cloneDeep(defaultParams);
    delete Data.searchParams.daren_openid;
    currentParams.value = null;
    getBelongList();
};

const tableOption = [
    {
        prop: 'daren_channel_name',
        label: '来源渠道',
        width: 100,
        render({ row }: any) {
            return row?.daren_channel_name || '-';
        }
    },
    {
        prop: 'daren_name',
        label: '来源达人',
        render({ row }: any) {
            return row?.daren_name ? row?.daren_name : '-';
        }
    },
    {
        prop: 'shop_name',
        label: '店铺名称',
        'min-width': 100,
        render({ row }: any) {
            return row?.shop_name || '-';
        }
    },
    {
        prop: 'order_sn',
        label: '订单编号',
        'min-width': 100,
        render({ row }: any) {
            return row?.order_sn || '-';
        }
    },
    {
        prop: 'goods_name',
        label: '商品信息',
        'min-width': 200,
        render({ row }: any) {
            return (
                <div class="commodity-column-info">
                    <el-image
                        src={row.goods?.goods_img || goodDefaultImg}
                        preview-src-list={[row.goods?.goods_img || goodDefaultImg]}
                        preview-teleported></el-image>
                    <el-popover placement="top-start" title={row.goods?.goods_name} trigger="hover" width="220px">
                        {{
                            default: () => row.sku_name,
                            reference: () => (
                                <div class="commodity-info">
                                    <div class="zw-text-ellipsis2"> {row.goods?.goods_name} </div>
                                    <div class="zw-text-ellipsis"> x{row.goods?.goods_num || 1} </div>
                                </div>
                            )
                        }}
                    </el-popover>
                </div>
            );
        }
    },
    {
        prop: 'actually_amount',
        label: '实付金额',
        width: 100,
        render({ row }: any) {
            return row?.actually_amount ? '￥' + row?.actually_amount : '-';
        }
    },
    {
        prop: 'order_state_name',
        label: '订单状态',
        width: 100,
        render({ row }: any) {
            return row?.order_state_name || '-';
        }
    },
    {
        prop: 'order_time',
        label: '创建时间',
        width: 180,
        render({ row }: any) {
            return row?.order_time || '-';
        }
    }
];

// 获取列表信息
const fetchApi = (): any => {
    return new Promise((resolve: any): any => {
        resolve([{}, getDarenOrderList]);
    });
};

// 提示弹窗
const appDialog = reactive({
    visible: false,
    title: '提示',
    width: '400px',
    submit: () => {
        appDialog.visible = false;
    },
    submitText: '好的'
});

// 同步订单
const syncOrderHandler = async e => {
    await syncDarenOrder('');
    parabolaAnimation(e);
    ShowTaskMessage('达人订单异步任务创建成功');
    appDialog.visible = true;
};

// 去添加达人
const goToAddWiseManHandler = () => {
    router.push({
        path: '/ecommerce/storeManage/wiseManList'
    });
};

// 初始化归属达人列表
const getBelongList = async () => {
    const data: any = await getWiseManList({
        daren_channel_id: '0',
        auth_status: [2, 3],
        page: 1,
        page_size: 999
    });
    belongOptionList.splice(0, belongOptionList.length, ...data.data);
};

onMounted(async () => {
    getBelongList();
    // 看看是否有达人
    const data = await getWiseManList('');
    Data.hasAddMan = data?.data.length;
});
</script>

<style lang="scss" scoped>
.wise_order_List_page {
    height: calc(100vh - 142px);
    padding: 24px;
    border: 1px solid #eaeaea;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .zw-table {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: hidden;

        :deep(.el-table) {
            flex: 1;

            .el-table__empty-block {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }
    }

    .zw-table__empty {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        height: 400px;

        &-img {
            transform: translateX(15%);
        }

        &-title {
            margin-top: -25px;
        }
    }

    :deep(.commodity-column-info) {
        display: flex;

        $image-width: 60px;

        gap: 10px;

        .commodity-info {
            cursor: pointer;
            width: calc(100% - $image-width);
            display: flex;
            flex-direction: column;
            align-items: stretch;
            justify-content: space-around;
            font-family: PingFangSC-Regular, 'PingFang SC';

            > div {
                font-size: 13px;
                color: #969696;
                line-height: 13px;
            }

            > div:first-child {
                font-size: 14px;
                color: #33302d;
                line-height: 20px;
            }
        }

        .el-image {
            flex: 0 0 $image-width;
            border-radius: 4px;
            width: $image-width;
            height: $image-width;
        }
    }

    .dialog_tip_container {
        height: 100px;
        line-height: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        :nth-child(1) {
            font-weight: 600;
            font-size: 15px;
        }
    }
}
</style>
